<template>
	<view class="ground">
			<div>
				<navitop>
					<i class="iconfont" slot="left-slot" @click="outlot">&#xe667;</i>
					<span slot="center-slot">详情</span>
					<!-- <span slot="right-slot">123</span> -->
				</navitop>
			</div>
		<div class="ground-outside " :style="'margin-top:'+rHeight+'px;'">
			<div class='ground-content'>
				<h1 class='ground-content-one'>11111111</h1>
				<div class='ground-content-tow'>
					<p>14564we64fa5sdf asdf asdf23qwe5f46dsa1a </p>
				</div>
			</div>
			<div class="ground-source">
				<text>文章来源：1231231234561234156</text>
			</div>
			<div class="ground-button">
				<div>
					<button class="ground-button-one" >分享文章，赢取话费</button>
				</div>
				<div class="ground-button-tow">
					<span>赢得话费</span>
				</div>
				<div class="ground-button-three">
					<span>赢得话费</span>
				</div>
			</div>
			<div class="ground-lun">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item>
									<view class="swiper-item uni-bg-red">A</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-green">B</view>
								</swiper-item>
								<swiper-item>
									<view class="swiper-item uni-bg-blue">C</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</div>
			<div class="ground-img">
				<div>
					<image src="../../../static/image/logo.png" class="ground-imgs"></image>
				</div>
				<div class="ground-img-one">
					<text class="ground-imgs-textone">电话</text>
					<text class="ground-imgs-texttow">官网</text>
				</div>
			
			</div>
		</div>
	</view>
</template>

<script>
import navitop from '@/components/common/navi-top'

export default {
	components: {
		navitop
	},
	data(){
		return {
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			rHeight: 40
		}
	},
	mounted() {
		this.rHeight = this.rHeight + uni.getSystemInfoSync().statusBarHeight;
	},
	methods:{
		outlot(){
			uni.navigateBack();
		},
		changeIndicatorDots(e) {
			this.indicatorDots = !this.indicatorDots
		},
		changeAutoplay(e) {
			this.autoplay = !this.autoplay
		},
		intervalChange(e) {
			this.interval = e.target.value
		},
		durationChange(e) {
			this.duration = e.target.value
		}
	}
}	

</script>

<style scoped lang="scss">
	.public_top {
		padding-top: 40px;
	}
.ground {
	border: 1px solid red;
	background-color: #fff;
	.ground-outside {
		width: 95%;
		margin: auto;
		.ground-content-one {
			text-align: center;
		}
		.ground-content-tow {
			text-indent:2em
		}
		.ground-source {
			padding: 80rpx 0 80rpx 0;
		}
		.ground-button {
			.ground-button-one{
				background-color: green;
				width: 60%;
				border-radius: 30px;
				color: #fff;
				font-size: 16px;
			}
			.ground-button-tow {
				text-align: center;
				padding: 20rpx 0 0 0;
			}
			.ground-button-three {
				text-align: center;
				padding: 20rpx 0 60rpx 0;
			}
		}
		.ground-lun {
			background-color: beige;
			height: 180px;
			border-radius: 10px 10px 0 0;
		}
		.ground-img{
			display: flex;
			justify-content: space-between;
			.ground-imgs {
			width: 100rpx;
			height: 100rpx;
			padding-top: 20rpx;
			}
			.ground-img-one {
				border: 1xp solid red;
				padding: 50rpx 20rpx 0 0;
				.ground-imgs-textone {
					padding-right: 40rpx;
				}
			}
		}
		
	}
		
	
}
	
</style>
